<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>后台管理中心</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/app.css" rel="stylesheet">
    <link href="/js/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <script type="text/javascript" src="/js/layui/layui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

     <style>
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .stats-box {
            padding: 10px 20px;
            background-color: #03a9f4;
            border-radius: 5px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stats-box h3 {
            margin: 0;
            font-size: 24px;
            color: #fff;
        }
        .stats-box p {
            margin: 5px 0 0;
            font-size: 14px;
            color: #fff;
        }
        .chart-container {
            position: relative;
        }
        .chart-container .current-date-data {
            position: absolute;
            top: 10px;
            right: 20px;
            background: rgba(255, 255, 255, 0.8);
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: #333;
        }
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
            .chart-grid {
                grid-template-columns: 1fr;
            }
        }

        .chart-full-width {
            grid-template-columns: 1fr !important;
            width: 100%;
        }
    </style>
</head>
@extends('admin.layouts.head')
@section('content')
<body>
    <div id="app">
        <div class="wrapper -header-fixed">
            @include('admin.layouts.navbar')
            @include('admin.layouts.sidebar')

            <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">
                        <div class="stats-container">
                            <div class="stats-box">
                                <h3 id="totalUsers">0</h3>
                                <p>总用户数</p>
                            </div>
                            <div class="stats-box">
                                <h3 id="totalGames">0</h3>
                                <p>总游戏数</p>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 120px">选择日期区间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="date-range" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                            </div>
                        </div>
                        <div class="chart-grid" id="chart-grid">
                            
                            <div class="chart-container">
                                <div id="chart2" style="width: 100%; height: 400px;"></div>
                                <div class="current-date-data" id="chart2-data"></div>
                            </div>
                            <div class="chart-container">
                                <div id="chart3" style="width: 100%; height: 400px;"></div>
                                <div class="current-date-data" id="chart3-data"></div>
                            </div>
                            <div class="chart-container">
                                <div id="chart1" style="width: 100%; height: 400px;"></div>
                                <div class="current-date-data" id="chart1-data"></div>
                            </div>
                            <div class="chart-container">
                                <div id="chart5" style="width: 100%; height: 400px;"></div>
                                <div class="current-date-data" id="chart5-data"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容页结束 -->
        </div>
    </div>
    <script>
        layui.use(['laydate'], function(){
            var laydate = layui.laydate;

            // 渲染日期区间选择器
            laydate.render({
                elem: '#date-range',
                range: true,
                value: '{{ date("Y-m-d", strtotime("-6 days")) }} - {{ date("Y-m-d") }}',
                max: '{{ date("Y-m-d") }}',
                done: function (value, date, endDate) {
                    fetchData(value);
                }
            });

            // 初次加载时默认日期区间的数据
            fetchData('{{ date("Y-m-d", strtotime("-6 days")) }} - {{ date("Y-m-d") }}');
        });

        function fetchData(dateRange) {
            var dates = dateRange.split(' - ');
            var startDate = dates[0];
            var endDate = dates[1];
            var dateDiff = (new Date(endDate) - new Date(startDate)) / (1000 * 60 * 60 * 24);

            // 动态调整图表布局
            var chartGrid = document.getElementById('chart-grid');
            if (dateDiff > 7) {
                chartGrid.classList.add('chart-full-width');
            } else {
                chartGrid.classList.remove('chart-full-width');
            }

            // 通过AJAX请求获取数据
            $.ajax({
                url: '{{ route("admin.dashboard.data") }}',
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate
                },
                success: function(data) {
                    // 更新总用户数和总游戏数
                    $('#totalUsers').text(data.totalUsers);
                    $('#totalGames').text(data.totalGames);

                    // 获取当前日期的数据
                    var currentIndex = data.dates.length - 1;
                    var currentDateData = {
                        newUsers: data.newUsers[currentIndex],
                        returningUsers: data.returningUsers[currentIndex],
                        gamePlayers: data.gamePlayers[currentIndex],
                        rechargeAmount: data.rechargeAmount[currentIndex],
                        exchangeBalance: data.exchangeBalance[currentIndex],
                        gameActivityPoints: data.gameActivityPoints[currentIndex],
                        usedGamePoints: data.usedGamePoints[currentIndex],
                        userSpendAmount: data.userSpendAmount[currentIndex],
                        dailyDrawNum: data.dailyDrawNum[currentIndex]
                    };

                    // 新用户数量和进入游戏玩家数量
                    var chart1 = echarts.init(document.getElementById('chart1'));
                    var option1 = {
                        title: { text: '新用户数量和进入游戏玩家数量', left: 'left' },
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['新用户数量', '进入游戏玩家数量', '回归用户数量'], right: '10%' },
                        color: ['#5470C6', '#91CC75', '#FF66CC'], // 添加新颜色
                        xAxis: { type: 'category', data: data.dates },
                        yAxis: { type: 'value' },
                        series: [
                            { name: '新用户数量', type: 'bar', data: data.newUsers },
                            { name: '进入游戏玩家数量', type: 'bar', data: data.gamePlayers },
                            { name: '回归用户数量', type: 'bar', data: data.returningUsers } // 回归用户数据
                        ]
                    };
                    chart1.setOption(option1);
                    $('#chart1-data').html(`
                        <p>当前日期: ${data.dates[currentIndex]}</p>
                        <p>新用户数量: ${currentDateData.newUsers}</p>
                        <p>回归用户数量: ${currentDateData.returningUsers}</p> 
                        <p>进入游戏玩家数量: ${currentDateData.gamePlayers}</p>
                    `);

                    // 充值金额和兑换余额
                    var chart2 = echarts.init(document.getElementById('chart2'));
                    var option2 = {
                        title: { text: '充值金额、用户消费金额、兑换余额', left: 'left' },
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['充值金额', '用户消费金额', '兑换余额'], right: '10%' },
                        color: ['#EE6666', '#FF9900', '#3BA272'], // 设置颜色
                        xAxis: { type: 'category', data: data.dates },
                        yAxis: { type: 'value' },
                        series: [
                            { name: '充值金额', type: 'bar', data: data.rechargeAmount },
                            { name: '用户消费金额', type: 'bar', data: data.userSpendAmount },
                            { name: '兑换余额', type: 'bar', data: data.exchangeBalance }
                        ]
                    };
                    chart2.setOption(option2);
                    $('#chart2-data').html(`
                        <p>当前日期: ${data.dates[currentIndex]}</p>
                        <p>用户消费金额: ${currentDateData.userSpendAmount}</p>
                        <p>充值金额: ${currentDateData.rechargeAmount}</p>
                        <p>兑换余额: ${currentDateData.exchangeBalance}</p>
                    `);

                    // 游戏活动赠送积分和使用玩服积分
                    var chart3 = echarts.init(document.getElementById('chart3'));
                    var option3 = {
                        title: { text: '游戏活动赠送积分和使用玩服积分', left: 'left' },
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['游戏活动赠送积分', '使用玩服积分'], right: '10%' },
                        color: ['#FFCC33', '#00CCCC'], // 设置颜色
                        xAxis: { type: 'category', data: data.dates },
                        yAxis: { type: 'value' },
                        series: [
                            { name: '游戏活动赠送积分', type: 'bar', data: data.gameActivityPoints },
                            { name: '使用玩服积分', type: 'bar', data: data.usedGamePoints }
                        ]
                    };
                    chart3.setOption(option3);
                    $('#chart3-data').html(`
                        <p>当前日期: ${data.dates[currentIndex]}</p>
                        <p>游戏活动赠送积分: ${currentDateData.gameActivityPoints}</p>
                        <p>使用玩服积分: ${currentDateData.usedGamePoints}</p>
                    `);

                    // 每日抽奖人数
                    var chart5 = echarts.init(document.getElementById('chart5'));
                    var option5 = {
                        title: { text: '每日抽奖人数', left: 'left' },
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['抽奖人数'], right: '10%' },
                        color: ['#FF33CC'], // 设置颜色
                        xAxis: { type: 'category', data: data.dates },
                        yAxis: { type: 'value' },
                        series: [
                            { name: '抽奖人数', type: 'bar', data: data.dailyDrawNum }
                        ]
                    };
                    chart5.setOption(option5);
                    $('#chart5-data').html(`
                        <p>当前日期: ${data.dates[currentIndex]}</p>
                        <p>抽奖人数: ${currentDateData.dailyDrawNum}</p>
                    `);
                },
                error: function(error) {
                    console.log('获取数据失败', error);
                }
            });
        }
    </script>
</body>
</html>